{% extends "base.html" %} {% load staticfiles %} {% block content %}
<div class="container-fluid ">
	<div class="row ">

		<div class="col-md-11" style="text-align: center;">
			<form class="form-inline" action="http://localhost:8000/ordertabalelistJaon/" id="searchForm" method="post">
				<div class="form-group">
					<label for="exampleInputName2">订单号:</label>
					<input type="text" class="form-control" name="orderid" id="orderid" placeholder="订单号">
					<label for="exampleInputName2">用户名:</label>
					<input type="text" class="form-control" id="userid" name="userid" placeholder="用户名">
					<label for="exampleInputName2">订单状态:</label>
					<select name="status" class="form-control" id="myStatus">
						<option value="0">请选择</option>
						<option value="1">待审核</option>
						<option value="2">已审核</option>
						<option value="3">待支付</option>
						<option value="4">已支付</option>
						<option value="5">代发货</option>
						<option value="6">待收货</option>
						<option value="7">已取消</option>
						<option value="8">已完成</option>
					</select>
				</div>
				<input type="submit" id="tijiao" class="btn btn-success mybtn" aria-hidden="true" value="订单查询">
				<!-- <span class="glyphicon glyphicon-search" aria-hidden="true" value="订单查询"> -->
			</form>
		</div>
		<table class="table">
			<thead>
				<tr>
					<th colspan="11">

						<button class="btn btn-default trash AllDelete"><span class = "glyphicon glyphicon-trash">批量删除</span></button>
						<label id="userNumber" class="count" style="float: right; padding-right: 4%;">共有<strong id="orderCount"></strong>条数据</label>
						
					</th>
				</tr>
			</thead>

			
			<thead>
				<tr>
					<th class="info nature">
						<input type="checkbox" id="checkbox-all">
					</th>
					<th>序号</th>
					<th>订单号</th>
					<th>用户ID</th>
					<th>价格</th>
					<th>下单时间</th>
					<th>状态</th>
					<th>编辑</th>
				</tr>
			</thead>
			<tbody id="mytbody" class="myListTable">

			</tbody>
		</table>

		<div class="text-center">
			<ul id="visible-pages-example"></ul>
		</div>
		<div class="text-center">
			<ul id="aaa"></ul>
		</div>

	</div>
	<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false" data-show="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

	{% endblock %} {% block contentRight %}

	<ol class="breadcrumb">
		<li>
			<a href="#"><i class="fa fa-dashboard"></i> Home</a>
		</li>
		<li class="active">订单管理</li>
	</ol>

	{% endblock %} {% block contentLeft %} 订单管理
	<small>Version 5.0</small> {% endblock %} {% block script %}
	<script src="{% static 'layer/layer.js' %}" type="text/javascript" charset="utf-8"></script>
	<script>
		var thispage = 1
		var searchData = ""

		//解析数据到页面
		var m = 0;
		var n = 0;
		var thestatus = ""

		function orderListToPage(data, page) {
			for(var i = 0; i < data.length; i++) {
				m += 1;
				thestatus = ""
				if(i >= (page - 1) * 10 && i <= page * 10 - 1) {
					oneOrder(data[i])
				}
			}

			$('.delete').click(function() {
				console.log("***************");
				var that = $(this).parents('tr');
				var objData = that.attr('orderid')
				deleteOneDataById(objData, that);
			})
		}

		function oneOrder(data) {
			n = 0;
			orderid = data["orderid"]
			userid = data["userid"]
			price = data["price"]
			ordertime = data["ordertime"]
			status = data["status"]
			n = parseInt(status);

			if(n >= 1 && n <= tool_order_status.length) {
				thestatus = tool_order_status[n - 1]
			} else {
				thestatus = "状态不正确";
			}

			var myHtml = '<tr class="mytr" orderid="' + orderid + '"><td class="info ele"><input class="checkbox-one" name="checkbox-one" type="checkbox"/></td><td scope="row">' + m + '</td><td>' + orderid + '</td><td>' + userid + '</td><td>' + price + '</td><td>' + ordertime + '</td><td>' + thestatus + '</td><td > <button class="btn btn-default delete">删除</button></td></tr>'
			$(".myListTable").append(myHtml)
			
		}

		// 根据id删除一条数据
		function deleteOneDataById(objId, ele) {
			myPost("ordertableDelete", {
				orderid: objId
			}, function(data) {
				// 警告,需要加判断,服务器删除成功之后才能移除标签 
				// 另外删除成功之后 要增加弹框提示
				if (data.status == "ok") {
					layer.msg("删除成功");
					$(ele).remove();
				} else {
					layer.msg("删除失败");
				}
			})
		}

		function loadData() {	
			myPost("orderSpilit/?page=" + thispage, {}, function(data) {
				m = 0;
				ordercount = data.ordercount
				orderListPages = Math.ceil(parseInt(ordercount) / 10)
				$(".myListTable").children("tr").remove()
				mainData = data.data;
				orderListToPage(mainData, 1)
				$("#orderCount").text(ordercount)
				$("#visible-pages-example").children(".sumdiv").remove()
				// 创建分页
				createPageNav('#visible-pages-example', orderListPages, function(event, page) {
					thispage = page;
					loadData()
				})
			})
		}

		$(document).ready(function() {
			loadData()
		});

		//解析数据 data为数组

		$(".AllDelete").click(function() {
			var isEmeptySelect = true;
			m = 0;
			console.log("批量删除");
			$("[name = checkbox-one]:checkbox").each(function() {
				if($(this).is(":checked")) {
					isEmeptySelect = false;
					var that = $(this).parents('tr');
					var objData = that.attr('orderid')
					deleteOneDataById(objData, that)
				}
			})
			if (isEmeptySelect == true) {
	            console.log("000000");
	            layer.msg("选择要删除的内容");
	        }
		})

		$('#checkbox-all').click(function() {
			if($('#checkbox-all').is(':checked')) {
				$(".checkbox-one").prop("checked", true);
			} else {
				$(".checkbox-one").prop("checked", false);
			}
		})

		var selectpage = 1

		// function ajaxSubmitForm() {
	
		// 	m = 0;
		// 	var option = {
		// 		url: "http://localhost:8000/ordertabalelistJaon/",
		// 		type: 'POST',
		// 		data: {
		// 			"selectpage": selectpage
		// 		},
		// 		// dataType : 'json',
		// 		success: function(data) {

		// 			console.log("fffff");
		// 			newData = data.data
		// 			if(data.data != "") {
		// 				layer.msg("查找成功")
		// 			} else {
		// 				layer.msg("查找失败")
		// 			}
		// 			selectCount = data.selectCount
		// 			selectListPages = Math.ceil(parseInt(selectCount) / 10)
		// 			$(".myListTable").children("tr").remove()
		// 			SelectData = data.data;
		// 			orderListToPage(SelectData, 1)
		// 			$("#orderCount").text(selectCount)
		// 			$("#visible-pages-example").children(".sumdiv").remove()

		// 			var spanele = '<span class="sumdiv">共' + selectListPages + '页,当前第' + selectpage + '页</span>'
		// 			$("#visible-pages-example").append($(spanele))

		// 			// 创建分页
		// 			createPageNav('#visible-pages-example', selectListPages, selectListPages > 5 ? 5 : selectListPages, function(event, page) {
		// 				selectpage = page;
		// 				ajaxSubmitForm()
		// 			})

		// 		},
		// 		error: function(data) {
		// 			layer.msg("请求出错");
		// 		}
		// 	};
		// 	$("#searchForm").ajaxSubmit(option);
		// 	return false;
		// }

		$('#searchForm').on('submit', function(e) {
			e.preventDefault();
			$(this).ajaxSubmit({
				data: {
					"selectpage": selectpage
				},
				success: function(data) {

					searchData = data;

					
					parseData();

				}
			})
		});

		function parseData() {
			if(searchData == "" || searchData.length == 0 || searchData.data.length == 0) {
				layer.msg("查询失败");
				return;
			}
			layer.msg("查询成功");
			$("#visible-pages-example").twbsPagination("destroy") //销毁分页栏
			selectCount = searchData.selectCount
			selectListPages = Math.ceil(parseInt(selectCount) / 10)
			createPageNav('#visible-pages-example' , selectListPages , function (event , page) {
				dataToView(page);
			})
		}

		function dataToView(page) {
			newData = searchData.data

			$(".myListTable").children("tr").remove()
			SelectData = searchData.data;
			orderListToPage(SelectData, page)
			$("#orderCount").text(selectCount)
			$("#visible-pages-example").children(".sumdiv").remove()

			var spanele = '<span class="sumdiv">共' + selectListPages + '页,当前第' + selectpage + '页</span>'
			$("#visible-pages-example").append($(spanele))
		}
	</script>
	{% endblock %}